<template>
  <div :id="id" class="map-container" :style="{ height: height + 'px' }"></div>
</template>
<script>
export default {
  name: 'a-map',
  model: {
    prop: 'address',
    event: 'change'
  },
  props: {
    id: {
      type: String,
      default: 'container'
    },
    initCenter: {
      type: Array,
      default: () => [116.397428, 39.90923]
    },
    height: {
      type: Number,
      default: 300
    },
    // 地址
    address: {
      type: String,
      default: ''
    },
    // 经纬度
    lnglat: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    iAddress: {
      get () {
        return this.address
      },
      set (value) {
        this.$emit('update:address', value)
        this.$emit('change', value)
      }
    },
    iLnglat: {
      get () {
        return this.lnglat
      },
      set (value) {
        this.$emit('update:lnglat', value)
      }
    }
  },
  data() {
    return {
      map: null,
      marker: null,
      geocoder: null, // 位置转换, 坐标 地址
      geolocation: null // 定位
    }
  },
  mounted() {
    this.init(this.initCenter)
  },
  methods: {
    init(initCenter) {
      const AMap = this.$AMap
      if (!AMap) throw new Error('Please introduce amap API to $AMap in main.js!')

      const map = new AMap.Map(this.id, {
        resizeEnable: true,
        zoom: 13,
        center: initCenter
      })

      AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.Geocoder', 'AMap.Geolocation'], () => {
        map.addControl(new AMap.ToolBar())
        map.addControl(new AMap.Scale())

        this.geocoder = new AMap.Geocoder({})
        this.geolocation = new AMap.Geolocation({
          timeout: 50000
        })

        map.addControl(this.geolocation)

        // 定位
        this.getCurrentPosition()
      })

      map.on('click', this.handleClick)
      this.map = map

      this.addMarker(initCenter)
    },

    // 实例化点标记
    addMarker(initCenter) {
      const AMap = this.$AMap
      const marker = new AMap.Marker({
        icon: '', //图片 ip
        imageSize: '20px',
        position: initCenter,
        offset: new AMap.Pixel(-13, -30),
        draggable: true, // 拖拽
        cursor: 'move',
        raiseOnDrag: true // 拖拽效果
      })

      marker.setMap(this.map)
      this.marker = marker
    },

    // map click
    handleClick(e) {
      const lnglat = [e.lnglat.getLng(), e.lnglat.getLat()]
      this.regeoCode(lnglat)
      this.iLnglat = lnglat
    },

    // 获取地址(坐标 -> 地址)
    regeoCode(lnglat) {
      this.map.add(this.marker)
      this.marker.setPosition(lnglat)

      this.geocoder.getAddress(lnglat, (status, result) => {
        if (status === 'complete' && result.regeocode) {
          this.iAddress = result.regeocode.formattedAddress
        } else {
          this.$message.error('根据经纬度查询地址失败')
          console.error('根据经纬度查询地址失败')
        }
      })
    },

    // 定位
    getCurrentPosition() {
      if (!this.geolocation) throw new Error('Please install positioning plugin: AMap.Geolocation!')

      this.geolocation.getCurrentPosition((status, result) => {
        if (status === 'complete' && result.position) {
          this.iAddress = result.formattedAddress
          this.iLnglat = [result.position.lat, result.position.lng]
        } else {
          this.$message.error('定位失败')
          console.error('定位失败')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.map-container {
  width: 100%;
}
</style>
